<template>
  <view class="menu">
    <view class="content">
      <view class="menu-item" hover-class="is-hover">
        <view class="iconfont icon-dingdan"></view>
        <text>我的订单</text>
      </view>
      <view class="menu-item">
        <view class="iconfont icon-shoucang"></view>
        <text>我的收藏</text>
      </view>
      <view class="menu-item">
        <view class="iconfont icon-dizhi"></view>
        <text>我的地址</text>
      </view>
      <view class="menu-item">
        <view class="iconfont icon-kefu"></view>
        <text>我的客服</text>
      </view>
    </view>
  </view>
</template>

<script></script>

<style lang="less" scoped>
.content {
  margin: 0 20rpx;
  font-size: 32rpx;
  background-color: whitesmoke;
  .menu-item {
    padding: 0 32rpx;
    display: flex;
    height: 94rpx;
    line-height: 94rpx;
    .iconfont {
      font-size: 38rpx;
      margin-right: 20rpx;
    }
    text {
      flex: 1;
      border-bottom: 1px solid #ccc;
    }
    &:last-child text {
      border-bottom: none;
    }
  }
  .is-hover {
    background-color: #ccc;
  }
}
</style>
